<script setup lang="ts">
// 用户头像菜单
import HdFullScreen from './fullScreen.vue'
import dayjs from 'dayjs'
import config from '@/config'

const { logout } = useAuth()
const storeUser = useStorage()
const user = storeUser.get('user')

</script>

<template>
  <main class="flex items-center">
    <section class="flex items-center">
      <span class="text-xs text-green-500">{{ user?.name }} </span>|
      <span class="text-xs text-amber-600">注册于 {{ dayjs(user?.created_at).fromNow() }}</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link flex items-center">
          <div class="flex flex-col text-xs ml-2 text-gray-600 font-light">
            <el-avatar :size="50" :src="user.avatar" />
          </div>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(menu, index) of config.user.avatarMenu" :key="index">
              <router-link :to="{ name: menu.routeName }"> {{ menu.title }} </router-link>
            </el-dropdown-item>
            <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </section>

  </main>
</template>
